Introduction

Web3Builder is a Javascript framework which allows users to customise HTML templates in a quick and easy way without writing any code. Web3Builder allows basic content editing, allowing users to changes link text, headers and other written content. It is very helpful for users who doesn't have HTML or CSS Knowlegde.

Web3Builder runs (almost) entirely in the browser. The only server side code is used for previewing & exporting HTML code.

Web3Builder is NOT a CMS (content management system). It does not provide a way for end-users to work on live websites and make changes to such websites.

For more information email me on support@surjithctly.in

Watch the Demo Video

Requirements

Web3Builder can be either installed locally or on live server. For both platforms, you will need a PHP environment with Apache Webserver.

a) Local

• PHP Server (eg: Wamp)

b) Live Server

• PHP
• Apache webserver
• An FTP tool to upload the files ( eg : FileZilla )

Installing Builder Locally

Installing Wamp

• Download Wamp from the Official website and Double click on the downloaded file and just follow the instructions.
• It will install latest Apache, MySQL and PHP.
• The “www” directory will be automatically created (usually c:\wamp\www)
• Double click the Wamp Icon to run Wamp Server (You can see a Green Wamp icon in the Task bar)

Installing Web3Builder Locally

• Create a subdirectory inside “www” and name it "builder"
• Copy Files inside "Builder" from the download package to "c:\wamp\www\builder"
• Open your favorite browser and navigate to "http://localhost/builder"
• Viola! Your builder is ready to use.

Installing Builder in Live Server

Installing Web3Builder in the server is pretty easy. Please follow the steps below

• Connect to your websever via FTP tool
• Create a subfolder inside public_html folder
• Copy Files inside "Builder" from the download package to your newly created folder on the Server
• Once uploaded, point your browser to said server/hosting and your script will work.
• Viola! Your builder is ready to use.

Editing Modes

Editing Template in Web3Builder Splits in to three parts. Sections, contents and details. You'll need to toggle these each time when you edit. Here is a list of things you can do with each mode.

Sections

• Drag & drop elements from the sidebar stock to the canvas.
• Remove, reset or reorder elements which were added to the canvas before.
• View and edit source HTML code of the elements.

Contents

• Edit written content on your pages, pasting or typing your own text.
• Basic HTML styling such as Bold, Italic etc.

Details

• Edit text color and size, even change font-family among predefined set.
• Choose different icons among FontAwesome set.
• Edit certain style attributes, images, links and videos.

Drag and drop

Web3Builder allows users to drag HTML elements onto a canvas and drop them where they'd like them to appear. Once dropped onto the canvas, the position can be changed by dragging and dropping as well. Elements can be delete individually or all elements on the current page can be deleted in one go.

Content editing

The Web3Builder script can also be used to edit written content inside each element (simply by setting the "building mode" to "content"). Web3Builder uses a rich text editor, allowing to make changes to the written content. Depending on what type of element you're editing, certain options will be disabled in the editor.

Style/detail editing

The Web3Builder script also allows for basic CSS editing and link editing. Using the built-in CSS editor, end-users can customise whatever CSS attributes the script's admin has configured. When editing a link, the end-user can point the link to either an internal page or an (external) URL.

Link editing

The Web3Builder script allows user to edit links as well. To be able to edit links, firstly select the Details building mode, this will allow you to select links. When selected, a "link" tab will be visible in the left panel, allowing you to either choose a page to link to or enter a URL manually.

Linking within a single page
When building a one-page website, you might want to link to sections within a single page rather then to a separate page. To do this, simply edit the link and use the second dropdown to choose the block you'd like to link to. The ID's to which can be linked, have to be configured within the block HTML files, and the ID attribute should be assigned to the first child element of the main container (for an example, please have a look at any of the bundled block files).

Image editing

The Web3Builder script allows user to edit images as well. To edit images on the canvas, firstly select the Details building mode, this will allow you to select images. When selected, a "image" tab will be visible in the left panel, allowing you to either upload an image or enter a URL manually.
To change the image, input new image url inside the textbox. To remove the image, just clear the textbox.

Video editing

To change the video in any section, copy the embed code from youtube or vimeo, then click "Source" button on the section, then replace the current iframe embed code with the new one.

Cloning items

Items which have been setup in the "editableItems" array in /js/builder.js can be cloned. Switch to "Details" building mode, select the item which you want to clone and finally click the clone button from the left panel. Please note that cloned items will be inserted into the canvas right next to the original item.

In some situations, you might want to have the parent of the original item cloned, rather then the item itself. Consider the example of an unsorted list with "a" tags inside "li" tags. In this case, it's the containing "li" element which should be cloned, not the "a" element itself. To make this happen, make sure to add the class name "propClone" to the parent element in your element's .html file. For an example, please have a look at the navigation of the element "header1.html".

Export HTML

Whenever the user is happy with the final result, the created markup can be exported by click the green export button. The export feature will grab all the used HTML elements for each created page. Once all pages are completed, all the HTML files are bundled into a ZIP archive together with the other external resources like stylesheets, Javascript files and images which will be downloaded by the end user.

Preview HTML

To preview a page click on the preview button in the top bar, you can only preview a single page; links to other pages won't work. When you make changes to your page, reloading the preview won't work, instead you'll have to use the "Preview" button again.

Pages

The Web3Builder script allows users to create multiple pages at once. To add a new page, simply click the green button labeled "+ Add" just below the current pages list. You can alter the page names as well (please use names without the .html extension, these are added automatically during the export). When exporting the markup, the pages will use the same names. To delete a page, simply click the little delete icon next to the page you'd like to delete.

Backup & Import

Web3Builder allows you to backup your current project as ".builder" file which you can continue edit later by importing the file in to Web3Builder.

Contact / Subscripe forms

Web3Builder only allows you to edit HTML pages. You should customize Forms manually. Once you have customized the pages, Export it as .zip. Then open it in your local machine. Then you can find php pages. Configure it manually to make it work.